<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/>
	</head>
	<body>
		
		<div class="container" id="app">
			<table class="table table-bordered table-striped table-hover">
				<tr>
					<td>序号</td>
					<td>名称</td>
					<td>图片</td>
					<td>价格</td>
					<td>操作</td>
				</tr>
				
				<tr v-for="(p,index) in products">
					<td>{{index+1}}</td>
					<td>{{p.name}}</td>
					<td> <img width="140px"  :src="p.img" > </td>
					<td>{{p.price}}元</td>
					<td> <button type="button" @click="remove(index)">移除</button> </td>
				</tr>
			</table>
		</div>
		
		<script>
			
			var vue = new Vue({
				el:"#app",
				data:{
					products:[{name:"小井",price:400,img:"https://img0.baidu.com/it/u=3030325702,1144960403&fm=26&fmt=auto&gp=0.jpg"},
							  {name:"小玛",price:600,img:"https://img1.baidu.com/it/u=4053996315,557836658&fm=26&fmt=auto&gp=0.jpg"},
							  {name:"小泽",price:888,img:"https://img1.baidu.com/it/u=1468378520,716511923&fm=11&fmt=auto&gp=0.jpg"}]
				},
				methods:{
					remove:function(index){
						this.products.splice(index,1);
					}
				}
				
			});
			
		</script>
	</body>
</html>
